<template>
  <div :class="props.name === 'my' ? 'remark-box1' : 'remark-box'">
    <div class="top">
      <p class="p">{{ props.remarkArr.length }}条评论</p>
      <span class="cha" @click="back">×</span>
    </div>
    <div class="content1">
      <div class="content" v-for=" item, index  in  props.remarkArr " :key="index"
        @touchstart="start(item.Comment.userNickname, item.Comment.commentId)" @touchend="end">
        <Async_content_part :item="item" @love="love" loveTitle="remark" />
      </div>
      <p class="wu">暂时没有更多了</p>
    </div>
    <div style="height: 44px;"></div>
    <ComponentBottom_part @ok="ok" @tofirends="tofirends" :placeholderval="placeholderval" />
  </div>
  <Async_message_part :flag="flag" :title="title" />
  <AsyncFriends :FriendsArr="contactList" @goback="goback" ye="remark" title="@好友" :offsetTopArr="offsetTopArr" />
</template>

<script setup>
import { defineAsyncComponent, ref } from 'vue'
import { getRemarkAPI, getRemarkFriendsAPI } from '../../api/Remark-part'
// 底部@,ok组件
import ComponentBottom_part from './ComponentBottom-part.vue';
const Async_message_part = defineAsyncComponent(() => import('./message-part.vue'))
const Async_content_part = defineAsyncComponent(() => import('./content-part.vue'))
const AsyncFriends = defineAsyncComponent(() => import('./friends-page.vue'));
const props = defineProps({
  remarkArr: {
    type: Array,
  },
  qf: {
    type: String
  },
  name: {
    type: String
  }
});
const emit = defineEmits(['ok'])
const flag = ref(false)
const title = ref('')

// const time = ref(1)
const placeholderval = ref('有爱评论，说点儿好听的~（长按评论回复）')
// 回复的是谁
const commentIdval = ref('')
// 好友列表全部数据
const FriendsArr = ref([])
// 好友名字数组
const contactList = ref([])
//  offsetTopArr数组
const offsetTopArr = ref([])
// 定时器
let set = ''
// 长按把input框的placeholder值改变
function start(name, commentId) {
  placeholderval.value = '有爱评论，说点儿好听的~（长按评论回复）'
  commentIdval.value = '',
    set = setTimeout(() => {
      commentIdval.value = commentId
      placeholderval.value = '回复@' + name
    }, 1000)
}
// 当按下时间不超过1秒就清空定时器
function end() {
  clearTimeout(set)
}
//关闭信息弹窗
function back() {
  if (props.name === 'my') {
    document.querySelector('.remark-box1').style.transform = 'translateY(844px)';
  } else {
    document.querySelector('.remark-box').style.transform = 'translateY(844px)';
  }

}
// 去@好友页面
async function tofirends() {
  document.querySelector('.Friends').style.transform = 'none';
  let userId = JSON.parse(localStorage.getItem('data')).userId
  // 获取好友列表
  let result = await getRemarkFriendsAPI(userId)
  let data = result.data.data
  data.forEach((item) => {
    let obj = { Comment: {} }
    obj.Comment.userAvatar = item.userAvatar
    obj.Comment.userDesc = item.userDesc
    obj.Comment.userId = item.userId
    obj.Comment.userNickname = item.userNickname
    FriendsArr.value.push(obj)
  })
  // 名称排序1
  SegSort(FriendsArr.value)
  console.log(contactList.value, '排序好的')
  setTimeout(() => {
    const titlemove = document.querySelectorAll('.titlemove')
    console.log(titlemove);
    titlemove.forEach(item => {
      console.log(item.offsetTop);
      offsetTopArr.value.push(item.offsetTop - 44)
    })
    console.log(offsetTopArr.value);
  }, 1000)
}

// 名称排序2
function SegSort(arr) {
  //非空判断如果传递过来的是一个空数组，会返回一个空数组
  if (!String.prototype.localeCompare) return null
  let title = 'ABCDEFGHJKLMNOPQRSTWXYZ'.split('') //定义好的排序方案
  let zh = '阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀'.split('')
  let newAll = [] //用于保存排序后的数组
  title.map((item, i) => {
    let cur = { title: item, data: [] }
    // 根据字段寻找排序方案对应的字符
    arr.map((item) => {
      if (item.Comment.userNickname.localeCompare(zh[i]) >= 0 &&
        item.Comment.userNickname.localeCompare(zh[i + 1]) < 0) {
        cur.data.push(item)
      }
    })
    // console.log(cur);
    // 进行排序
    if (cur.data.length != 0) {
      cur.data.sort(function (a, b) {
        return a.Comment.userNickname.localeCompare(b.userName, 'zh')
      })
      newAll.push(cur)
      console.log(newAll);
    }
    console.log(newAll, 123);
  })
  //  赋值给渲染的数组
  contactList.value = newAll
}
// message简便方法
function Timeout(t) {
  flag.value = true
  title.value = t
  setTimeout(() => {
    flag.value = false
    title.value = ''
  }, 1000)
}
// 评论点赞
async function love(val) {
  let result = await getRemarkAPI(val.userId, val.videoId, val.commentId)
  if (result.data.code === 200) {
    props.remarkArr.forEach((item) => {
      if (item.Comment.userId === val.userId) {
        item.loveFlag = !item.loveFlag
        item.flagHover = !item.flagHover
        if (item.loveFlag) {
          item.likeNum++
          Timeout('评论点赞成功~')
          setTimeout(() => {
            item.flagHover = false
          }, 500)
        } else {
          item.likeNum--
          Timeout('取消评论点赞~')
          setTimeout(() => {
            item.flagHover = false
          }, 500)
        }
      }
    })
  }
}
// 发布评论
async function ok(inputValue) {
  if (!inputValue) {
    Timeout('评论内容不得为空！')
  } else {
    if (props.qf === 'followed') {
      let params = {
        inputValue: inputValue,
        commentIdval: commentIdval.value,
      }
      emit('ok', params)
    } else {
      let params = {
        inputValue: inputValue,
        commentIdval: commentIdval.value,
        videoId: props.remarkArr[0].Comment.videoId
      }
      emit('ok', params)
    }
  }
}
async function goback() {
  document.querySelector('.Friends').style.transform = 'translateY(100%)'
}
</script>

<style lang="scss" scoped>
body,
html {
  height: 100%;
}


.wu {
  text-align: center;
  font-size: 12px;
  color: #65676e;
  padding-bottom: 12px;
  background-color: #161822;
}

.content1 {
  flex: 1;
  width: 100%;
  overflow: scroll;

  &::-webkit-scrollbar {
    display: none;
  }
}

.remark-box,
.remark-box1 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 590px;
  background-color: #1b1c22;
  transform: translateY(100%);
  transition: all 1s;
  z-index: 20;
  color: #626260;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  flex-direction: column;

  &::-webkit-scrollbar {
    display: none;
  }

  /* 过渡效果，通过动画改变透明度 */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  animation: fadeIn 1s ease;

  .remark {
    position: relative;
  }
}

.remark-box1 {
  position: fixed;
  top: 0;
  margin-top: 256px;
}

.top {
  height: 32px;
  width: 100%;
  z-index: 60;
}

.cha {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 26px;
  margin-right: 10px;
}

.p {
  top: 0;
  left: 0;
  text-align: center;
  margin-top: 10px;
  background-color: #161822;
}

.content {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 68px;
  background-color: #161822;
  margin-bottom: 5px;

  img {
    width: 40px;
    height: 40px;
    margin-left: 10px;
    border-radius: 50%;
  }

  .title {
    display: flex;
    flex-direction: column;
    margin-left: 10px;

    p {
      margin-top: 5px;
    }
  }
}
</style>